<template>
  <div class="information_container">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="top">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人信息</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <div
        class="big"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <div class="logo">
          <img src="../../assets/image/logo.png" alt="" />
        </div>
        <div>
          <div class="right">
            <div class="number">
              <i class="el-icon-collection-tag"></i>
              <span style="color: rgb(31, 31, 20); font-size: 15px; margin-right: 8px">
                借阅证编号:
              </span>

              {{ userMessage?.cardNumber }}
            </div>
            <div class="name">
              <i class="iconfont icon-gerenxinxi"></i>
              <span style="color: rgb(31, 31, 20); font-size: 15px; margin-right: 8px">
                借阅证姓名:
              </span>
              {{ userMessage?.userName }}
            </div>
            <div class="rule">
              <i class="iconfont icon-guizeshezhi"></i>
              <span style="color: rgb(31, 31, 20); font-size: 15px; margin-right: 8px">
                规则编号:
              </span>
              {{ userMessage?.ruleNumber }}
            </div>
            <div class="status">
              <i class="el-icon-refresh"></i>
              <span style="color: rgb(31, 31, 20); font-size: 15px; margin-right: 8px">状态:</span>
              {{ userMessage?.status === 1 ? "可用" : "禁用" }}
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card style="margin-top: 30px">
      <div>
        <div class="spans">
          <div style="margin-right: 60px">登录密码</div>
          <div style="display: flex; flex: 1; justify-content: space-between">
            <div
              style="
                border-bottom: 1px solid rgb(229, 230, 235);
                color: rgb(134, 144, 156);
                width: 900px;
              "
            >
              已设置。密码至少6位字符，支持数字、字母和除空格外的特殊字符，且必须同时包含数字和大小写字母。
            </div>
            <el-button>修改</el-button>
          </div>
        </div>
        <div class="spans">
          <div style="margin-right: 60px">用户邮箱</div>
          <div style="display: flex; flex: 1; justify-content: space-between">
            <div
              style="
                border-bottom: 1px solid rgb(229, 230, 235);
                color: rgb(134, 144, 156);
                width: 900px;
              "
            >
              您暂未设置邮箱，绑定邮箱可以用来找回密码、接收通知等。
            </div>
            <el-button>修改</el-button>
          </div>
        </div>
        <div class="spans">
          <div style="margin-right: 60px">用户密保</div>
          <div style="display: flex; flex: 1; justify-content: space-between">
            <div
              style="
                border-bottom: 1px solid rgb(229, 230, 235);
                color: rgb(134, 144, 156);
                width: 900px;
              "
            >
              您暂未设置密保，设置密保可以用来找回密码、接收通知等。
            </div>
            <el-button>修改</el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { getUserMessage, postPassword } from "../../api/api";

var validatePass2 = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== editForm.password) {
    callback(new Error("两次输入密码不一致!"));
  } else {
    callback();
  }
};

let userMessage = ref({});
const editForm = reactive({
  password: "",
  confirmPassword: "",
});
const editFormRules = reactive({
  password: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 6, max: 15, message: "新密码长度在6-15个字符", trigger: "blur" },
  ],
  confirmPassword: [{ validator: validatePass2, trigger: "blur" }],
});
const editDialogVisible = ref(false);

const loading = ref(true);

onMounted(() => {
  getUserInformaton();
});
//让修改公告的对话框可见,并从数据库中回显数据

//监听修改对话框的关闭，一旦对话框关闭，就重置表单，回显数据
const editDialogClosed = () => {
  // $refs.editFormRef.resetFields();
};
//获取个人信息
const getUserInformaton = () => {
  getUserMessage()
    .then(res => {
      userMessage.value = res.data;
      console.log(userMessage);
      ElMessage({
        message: "获取信息成功",
        type: "success",
      });
    })
    .catch(err => {
      console.log(err);
      ElMessage.error("修改失败");
    });

  loading.value = false;
};

//修改密码
const changePassword = () => {
  postPassword(editForm)
    .then(res => {
      window.sessionStorage.clear();
      router.push({ name: "Userlogin" });
    })
    .catch(err => {
      console.log(err);
    });
};
</script>

<style lang="less" scoped>
.changePWD {
  position: absolute;
  top: 50%;
  left: 50%;
}
.big {
  display: flex;
  height: 160px;
  .logo {
    width: 100px;
    height: 100px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    margin-left: 70px;
    margin-top: 30px;
    box-shadow: 0 0 10px #ddd;
    background-color: #fff;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
  .right {
    margin-left: 40px;
    margin-top: 40px;
  }
}

.spans {
  display: flex;
  height: 40px;
  padding-top: 20px;
}
</style>
